<html>

<head>
    <link rel="stylesheet" href="../../normalize.css">
    <link rel="stylesheet" href="../../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="example">
        <div v-bind:class="{ active: isActive }"></div>

        <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

        <div v-bind:class="classObject"></div>

        <div v-bind:class="classObject_2"></div>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#example',
            data: {
                isActive: true,
                hasError: false,
                error: null,
                classObject: {
                    active: true,
                    'text-danger': false
                }
            },
            // 使用计算属性是常用写法
            computed: {
                classObject_2: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            });
    </script>
</body>

</html>